<template>
  <div id="gameitem">
    <img :src="itemData.imgUrl" alt="" />
    <ul>
      <li v-for="(v, i) in itemData.types" :key="i">
        <span>{{ v }}</span>
      </li>
    </ul>
    <h2>{{ itemData.title }}</h2>
    <div>{{ itemData | comment | substr }}</div>
    <div>
      <img :src="itemData.avatar" alt="" />
      <i class="iconfont icon-star1"></i>
      <SvgIcon icon-class="xxx" icon-name="icon-anquan"></SvgIcon>
      <!--      <svg class="icon" aria-hidden="true">-->
      <!--        <use xlink:href="#icon-anquan"></use>-->
      <!--      </svg>-->
    </div>
  </div>
</template>

<script>
export default {
  name: "GameItem",
  props: ["itemData"],
  filters: {
    comment(val) {
      return val.comment + "=== " + val.version;
    },
    aaa(val) {
      let first = val.substring(0, 1).toUpperCase();
      let last = val.substring(1);
      return first + last;
    },
    bbb(val) {
      return val.split("").reverse().join("");
    },
    substr(val) {
      if (val.length > 30) {
        return val.substring(0, 30) + "...";
      }
      return val;
    },
  },
};
</script>

<style lang="scss" scoped>
.xxx {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
#gameitem {
  width: 253px;
  height: 246px;
  border-radius: 10px;
  overflow: hidden;
  background: white;
  //box-shadow: 3px 3px 10px #aaaaaa;
  > img {
    width: 100%;
  }
  > ul {
    height: 15px;
    padding: 0 20px;
    li {
      line-height: 15px;
    }
    li:first-child {
      float: left;
      font-size: 12px;
      margin-right: 20px;
      color: blue;
    }
    li:last-child {
      float: left;
      font-size: 12px;
      margin-right: 20px;
      color: green;
    }
    li > span {
      color: #aaaaaa;
    }
  }
  > h2 {
    height: 37px;
    font-size: 15px;
    padding: 0 10px;
    line-height: 15px;
  }
  > div:nth-of-type(1) {
    height: 36px;
    font-size: 12px;
    overflow: hidden;
    padding: 0 10px;
  }
  > div:nth-of-type(2) {
    font-size: 12px;
    height: 24px;
    padding: 0 10px;
    img {
      width: 20px;
      height: 20px;
      border-radius: 90px;
    }
  }
}
</style>
